<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="static/component/pear/css/pear.css" />
    <link rel="stylesheet" href="static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="static/css/public.css" media="all">
    <style>
        .jia:hover{
            color: #01AAED;
            cursor: pointer;
        }
        .jian:hover{
            color: #01AAED;
            cursor: pointer;

        }
    </style>
</head>
<body>

<div class="layui-form">
    <form class="layui-form layui-form-pane" >

        <div class="layui-inline">
            <label class="layui-form-label">出库仓库</label>
            <div class="layui-input-inline">
                <select name="repositoryId"  class="layui-input repositoryId" lay-filter="repositoryId">
                    <c:forEach items="${repostoryTypes}" var="repostoryTypes">
                        <option value="${repostoryTypes.reponseTypePid}">${repostoryTypes.reponseTypeName}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div style="height: 500px;border-style: solid;border-width: 1px;overflow-y: auto;border-color: #E1E1E1">
            <table class="layui-table table" lay-size="lg" align="center" >
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>操作</th>
                    <th>库存商品</th>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>品牌</th>
                    <th>单位</th>
                    <th>所占容量</th>
                    <th>可补货数量</th>
                    <th>补货数量</th>
                    <th>所属货架</th>
                </tr>
                </thead>
                <tr class="biaoge">
                    <td align="center">
                        <i class="layui-icon layui-icon-addition jia" style="font-size: 20px;font-weight: bold"></i>
                    </td>
                    <td>
                        <div class="layui-inline">
                            <div class="layui-input-inline shangpindiv">
                                <select name="purchaseState"  lay-verify="required"  class="layui-input shangpin" lay-filter="shangpin">
                                    <option value="">请选择</option>

                                </select>
                            </div>
                        </div>
                    </td>
                    <td >

                    </td>
                    <td>

                    </td>
                    <td>

                    </td>
                    <td>

                    </td>
                    <td>

                    </td>
                    <td style="width: 100px">

                    </td>
                    <td style="width: 100px">
                        <div class="layui-inline">
                            <div class="layui-input-inline" >
                                <input type="number"  name="shelfCount" required="" lay-verify="required" placeholder="补货数量" autocomplete="off" class="layui-input ShangjiaNumber gmshu">
                            </div>
                        </div>
                    </td>
                    <td style="width: 150px">
                        <div class="layui-inline" >
                            <div class="layui-input-inline huojiadiv">
                                <select name="eDepartment"   class="layui-input huojia"lay-filter="huojia" lay-verify="required">
                                    <option value="">请选择</option>
                                </select>
                            </div>
                        </div>
                    </td>
                </tr>

            </table>

        </div>
        <div style="margin-top: 40px;border-style: solid;border-width: 1px; border-color: #E1E1E1">
            <div class="layui-form-item" style="width: 360px;margin-top: 5px;margin-left: 10px">
                <label class="layui-form-label">补货数量</label>
                <div class="layui-input-inline" style="width: 240px">
                    <input type="text" name="sapplicationGoodsCount"  required="" lay-verify="required"  autocomplete="off" class="layui-input  layui-btn-disabled shangjiashu">
                </div>
            </div>
            <div class="layui-form-item layui-inline layui-form-text" style="width: 360px;margin-left: 10px">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" name="remarks" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-inline" style="margin-top: 75px;margin-left: 1100px">
                <button type="button"  id="shelfapplications" data-type="loa" class="layui-btn  site-demo-active layui-btn-normal  layui-btn-primary" lay-submit lay-filter="addshelfapplications"><i class="layui-icon layui-icon-ok">提交申请</i></button></div>
        </div>

    </form>
    <div style="width: 1000px;height: 40px;position: fixed;left: 300px;top: 250px;background-color: #000;padding: 30px;opacity: 0.5" id="lod">
        <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo" style="margin-top: 10px">
            <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
        </div>
    </div>
</div>


<script src="static/component/layui/layui.js"></script>
<script src="static/component/pear/pear.js"></script>

<script>
    //引入table
    layui.use(['element','laydate','table','form'],function () {
        var $ = layui.jquery
        var from = layui.form;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        let element = layui.element;

        //发送异步请求获取仓库编号,根据仓库id查询库存商品拼接到下拉上
        //根据仓库编号查询出来库存

        $("#lod").hide();
        //库存商品下拉框选择事件

        ridStock();
        //事件,单击加号添加一个新的表格列
        $(".jia").click(jia)


        //仓库改变事件
        form.on("select(repositoryId)",function (data){
            //恢复默认
            $(".table tr:gt(1)").remove();
            $(".table tr:eq(1)").find(".shangpin").find("option:gt(0)").empty().val(-1);
            $(".table tr:eq(1)").find("td:eq(2)").text("");
            $(".table tr:eq(1)").find("td:eq(3)").text("");
            $(".table tr:eq(1)").find("td:eq(4)").text("");
            $(".table tr:eq(1)").find("td:eq(5)").text("");
            $(".table tr:eq(1)").find("td:eq(6)").text("");
            $(".table tr:eq(1)").find("td:eq(7)").text("");
            $(".table tr:eq(1)").find("td:eq(8)").find(".gmshu").val(null);
            $(".table tr:eq(1)").find("td:eq(9)").find(".huojia").val(-1);
            //重新根据仓库编号加载下拉
            ridStock();
            form.render();
        })


        /**
         * 库存商品选中事件,根据选中的库存编号进行对应的库存信息查询
         */
        form.on("select(shangpin)",function (data){
            if (data.value==""){
                $(data.elem).parent().parent().parent().parent().find("td:eq(2)").text("");
                $(data.elem).parent().parent().parent().parent().find("td:eq(3)").text("");
                $(data.elem).parent().parent().parent().parent().find("td:eq(4)").text("");
                $(data.elem).parent().parent().parent().parent().find("td:eq(5)").text("");
                $(data.elem).parent().parent().parent().parent().find("td:eq(6)").text("");
                $(data.elem).parent().parent().parent().parent().find("td:eq(7)").text("");
                $(data.elem).parent().parent().parent().parent().find("td:eq(8)").find(".gmshu").val(null);
                $(data.elem).parent().parent().parent().parent().find("td:eq(9)").find(".huojia").val(null);
                form.render();
                return;
            }
            //发送异步请求查询库存编号对应的信息
            $.post("stock/ajaxIdStockTwo",{stockId:data.value},function (result){
                var stock = JSON.parse(result.data);
                //拼接信息
                $(data.elem).parent().parent().parent().parent().find("td:eq(2)").text(stock.goodsName);
                $(data.elem).parent().parent().parent().parent().find("td:eq(3)").text(stock.goodsPrice);
                $(data.elem).parent().parent().parent().parent().find("td:eq(4)").text(stock.brandName);
                $(data.elem).parent().parent().parent().parent().find("td:eq(5)").text(stock.specifiCations);
                $(data.elem).parent().parent().parent().parent().find("td:eq(6)").text(stock.capacity);
                $(data.elem).parent().parent().parent().parent().find("td:eq(7)").text(stock.stockCount);
                //根据当前库存拼接指定的货架
                $(data.elem).parent().parent().parent().parent().find("td:eq(9)").find(".huojia").empty();
                $(data.elem).parent().parent().parent().parent().find("td:eq(9)").find(".huojia").append("<option value=''></option><option value='"+stock.storgageRackId+"'>"+stock.storgageRackName+"</option>");
                form.render();


                $(data.elem).parent().parent().parent().parent().find("td:eq(8)").find(".gmshu").val(null);
                $(data.elem).parent().parent().parent().parent().find("td:eq(9)").find(".huojia").val(null);
                form.render();
                var count = null;
                //循环所有上架数量追加至上架数量
                $(".gmshu").each(function (index){
                    //循环所有上架数量追加至上架数量
                    if ($(this).val()!=null&&$(this).val()!=""){
                        count +=parseInt($(this).val());
                    }
                })

                if (isNaN(count)){
                    //追加上架数量
                    $(".shangjiashu").val("");
                }else{
                    //追加上架数量
                    $(".shangjiashu").val(count);
                }

            })
        })



        //上架数量的值改变事件
        $(".ShangjiaNumber").bind("change",numberChange);

        //选择货架事件
        form.on("select(huojia)",function (data){
            //判断上架数量是否被选中
            if ($(data.elem).parent().parent().parent().parent().find("td:eq(8)").find(".gmshu").val()==""||$(data.elem).parent().parent().parent().parent().find("td:eq(8)").find(".gmshu").val()==null){
                //货架清空
                layer.alert("请先输入上架数量!",{icon:2},function (index){
                    $(data.elem).val(-1);
                    form.render();
                    layer.close(index);
                })
                return;
            }
            //异步根据货架编号查询货架信息,跟所占容量对比是否大于
            $.post("storgageRack/ajaxSelectStorgageRack",{storgageRackId:data.value},function (result){
                var storgageRack = JSON.parse(result.data);

                //获取商品共需容量
                var goodscapacity = parseInt($(data.elem).parent().parent().parent().parent().find("td:eq(6)").text())*parseInt($(data.elem).parent().parent().parent().parent().find("td:eq(8)").find(".gmshu").val());
                //计算货架所剩容量
                var stockRemain =  storgageRack.goorssCapacity-storgageRack.residualCapacity;
                if (goodscapacity>stockRemain){
                    layer.alert("货架容量不足,请重新选择!",{icon:2},function (index){
                        $(data.elem).val(-1);
                        form.render();
                        layer.close(index);
                    })
                }
            })
        });




        //提交申请
        form.on("submit(addshelfapplications)",function (data){
            $("#id").show();

            //触发事件
            var active = {
                loa: function(othis){
                    $("#lod").show();
                    var DISABLED = 'layui-btn-disabled';
                    if(othis.hasClass(DISABLED)){
                        return;
                    }
                    //模拟loading
                    var n = 0, timer = setInterval(function(){
                        n = n + Math.random()*10|0;
                        if(n>100){
                            n = 100;
                            clearInterval(timer);
                            othis.removeClass(DISABLED);
                            //进行数据的提交,将所有的tr内容转换为json格式

                            //声明一个数组用来存储详情信息
                            var shelfApplicationDetails = new Array();

                            //循环所有详情
                            $(".table tr:gt(0)").each(function(index){
                                //库存编号
                                var stockId = $(this).find("td:eq(1)").find(".shangpin").val();
                                //上架数量
                                var shelfCount = $(this).find("td:eq(8)").find(".gmshu").val();
                                //所在货架
                                var storgageRack =  $(this).find("td:eq(9)").find(".huojia").val();
                                //所需容量
                                var capacity =  parseInt($(this).find("td:eq(6)").text())*parseInt($(this).find("td:eq(8)").find(".gmshu").val());

                                var details = "{'stock':"+stockId+",'shelfCount':"+shelfCount+",'storgageRack':"+storgageRack+",'capacity':"+capacity+"}";

                                shelfApplicationDetails[index] = details;

                            })






                            //发送异步请求,进行申请单的添加
                            $.post("shelfapplication/addShelfApplications",{shelfApplicationDetails:shelfApplicationDetails,sapplicationGoodsCount:data.field.sapplicationGoodsCount,repositoryId:data.field.repositoryId,remarks:data.field.remarks,shelfappType:"补货"},function (result){
                                if (result.success){
                                    layer.alert("申请已提交",{icon:1},function (index){
                                        window.close();
                                        parent.parent.location.reload(); // 父页面刷新
                                        parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                                    })
                                }
                            })





                        }
                        element.progress('demo', n+'%');
                    }, 1+Math.random()*1000);

                    othis.addClass(DISABLED);
                }

            };

            $('.site-demo-active').on('click', function(){
                var othis = $(this), type = $(this).data('type');
                active[type] ? active[type].call(this, othis) : '';
            });

        })




        //上架数量选中方法
        function numberChange(){
            //判断是否商品选中
            if ($(this).parent().parent().parent().parent().find(".shangpin").val()==""){
                $(this).val(null);
                //提示请先选中商品
                layer.alert("请先选择您的商品哦亲亲!",{icon:2},function (index){
                    layer.close(index);
                })
            }else{
                //不让上架数量大于库存数量
                if ($(this).val()<=0){
                    $(this).val(null);
                    layer.alert("至少上架一个商品哦!",{icon:2},function (index){

                        layer.close(index);
                    })
                    return;
                }

                if ($(this).val()> parseInt($(this).parent().parent().parent().parent().find("td:eq(7)").text())){
                    $(this).val(null);
                    layer.alert("上架数量不可以大于库存数量哦!",{icon:2},function (index){
                        layer.close(index);
                    })
                }else{
                    var count = null;
                    //循环所有上架数量追加至上架数量
                    $(".gmshu").each(function (index){
                        if ($(this).val()!=null&&$(this).val()!=""){
                            count +=parseInt($(this).val());
                        }
                    })

                    if (isNaN(count)){
                        //追加上架数量
                        $(".shangjiashu").val("");
                    }else{
                        //追加上架数量
                        $(".shangjiashu").val(count);
                    }

                }
            }
        }











        function jia() {
            var tr = "<tr class=\"biaoge\">\n" +
                "        <td align=\"center\">\n" +
                "            <i class=\"layui-icon layui-icon-addition jia\" style=\"font-size: 20px;font-weight: bold\"></i>\n" +
                "            <i class=\"layui-icon layui-icon-subtraction jian\"  style=\"font-size: 20px;font-weight: bold\"></i>\n" +
                "        </td>\n" +
                "        <td>\n" +
                "            <div class=\"layui-inline\">\n" +
                "                <div class='layui-input-inline shangpindiv'>\n" +

                "                </div>\n" +
                "            </div>\n" +
                "        </td>\n" +
                "        <td >\n" +
                "           \n" +
                "        </td>\n" +
                "        <td>\n" +
                "            \n" +
                "        </td>\n" +
                "        <td>\n" +
                "           \n" +
                "        </td>\n" +
                "        <td>\n" +
                "            \n" +
                "        </td>\n" +
                "        <td>\n" +
                "            \n" +
                "        </td>\n" +
                "        <td style=\"width: 100px\">\n" +
                "            \n" +
                "        </td>\n" +
                "        <td style=\"width: 100px\">\n" +
                "            <div class=\"layui-inline\">\n" +
                "                <div class=\"layui-input-inline\" >\n" +
                "                    <input type=\"number\" name=\"shelfCount\"  required=\"\" lay-verify=\"required\" placeholder=\"上架数量\" autocomplete=\"off\" class=\"layui-input ShangjiaNumber gmshu\">\n" +
                "                </div>\n" +
                "            </div>\n" +
                "        </td>\n" +
                "        <td style=\"width: 150px\">\n" +
                "            <div class=\"layui-inline\" >\n" +
                "                <div class=\"layui-input-inline huojiadiv\">\n" +
                "<select name='eDepartment'   class='layui-input huojia' lay-filter='huojia' lay-verify='required'>"+
                 "   <option value=''>请选择</option>"+
                "</select>"+
                "                </div>\n" +
                "            </div>\n" +
                "        </td>\n" +
                "    </tr>";

            //拼接一个新的列
            $(".table").append(tr);
            var shangpin = $(".table tr:eq(1)").find(".shangpin").clone();
            //加上下拉
            $(".table tr:last").find(".shangpindiv").append(shangpin);
            //值归零
            $(".table tr:last").find(".shangpin").val("");
            $(".table tr:last").find(".huojia").val("");
            form.render();
            //解绑重新绑定事件
            $(".jia").unbind("click",jia)
            $(".jia").bind("click",jia);
            $(".ShangjiaNumber").unbind("change",numberChange);
            $(".ShangjiaNumber").bind("change",numberChange);
            $(".jian").click(function () {
                $(this).parent().parent().remove();
                var count = null;
                //循环所有上架数量追加至上架数量
                $(".gmshu").each(function (index){
                    count += parseInt($(this).val());
                })

                if (isNaN(count)){
                    //追加上架数量
                    $(".shangjiashu").val("");
                }else{
                    //追加上架数量
                    $(".shangjiashu").val(count);
                }

            })
        }
        //补货申请只查已上架的商品进行补货,未上架不补货
        function ridStock(){
            $.post("stock/ajaxSelectrIdStockTwo",{rId:$(".repositoryId").val()},function (result){
                var repostoryArray = JSON.parse(result.data);
                //循环拼接
                for (let i =0;i<repostoryArray.length;i++){
                    var option = "<option value='"+repostoryArray[i].stockId+"'>"+repostoryArray[i].goodsName+"</option>";
                    $(".table tr:last").find(".shangpin").append(option);
                }
                form.render();
            })
        }
    })


</script>



</body>
</html>